<!--
 * @Description  :
 * @Version      : 1.0
 * @Author       : seraph
 * @Date         : 2024-12-13 16:10:18
 * @LastEditors  : seraph
 * @LastEditTime : 2024-12-24 12:27:58
-->
<template>
  <h4>仅支持表达式</h4>
  <hr />
  <h4>Vue 在所有的数据绑定中都支持完整的 JavaScript 表达式</h4>
  <h2 class="tips"><span>仅支持表达式: 每个绑定仅支持单一表达式，也就是一段能够被求值的 JavaScript 代码。</span></h2>
  <h4>在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上：</h4>
  <br />

  <h4>在文本插值中 (双大括号)</h4>
  <h4>示例代码：</h4>
  <h4>&#123;{ number + 1 }&#125;</h4>
  <h4>const number = ref(10);</h4>
  <h4>输出结果：</h4>
  <h4 class="tips">number is <span>{{ number }}</span>, &#123;{ number + 1 }&#125; is <span>{{ number + 1 }}</span></h4>
  <h4><button @click="modifyNumber">modify number</button></h4>
  <br />

  <h4>调用函数</h4>
  <p>可以在绑定的表达式中使用一个组件暴露的方法</p>
  <time :title="toTileDate(date)" :datetime="foramteDate(date)">{{ date }}</time>
  <br />
  <br />

  <h4>受限的全局访问</h4>
  <p>模板中的表达式将被沙盒化，仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象，比如 Math 和 Date。没有显式包含在列表中的全局对象将不能在模板内表达式中访问。</p>

</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch, computed } from 'vue'

const number = ref(10);
const modifyNumber = () => {
  number.value = Math.floor(Math.random() * 10);
}

// 定义 props
const props = defineProps({
  date: {
    type: Date,
    default: new Date(),
  }
});

// 定义方法
const toTileDate = (date: Date) => {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  return `tips: ${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
}

const foramteDate = (date: Date) => {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();
  return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day} ${hour < 10 ? '0' + hour : hour}:${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`;
}
</script>

<style scoped>
#blue {
  color: blue;
}

#red {
  color: red;
}

#green {
  color: green;
}

.bold {
  font-weight: bold;
}

.tips span {
  font-weight: bold;
  color: red;
}


/* Chrome, Safari, Edge, Opera */
#numInput[type="number"]::-webkit-outer-spin-button,
#numInput[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* firefox 兼容性 */
#numInput[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

button {
  margin-right: 10px;
  padding: 5px;
  min-width: 80px;
  border-radius: 5px;

  font: 700 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
  text-decoration: none;
  color: #333;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  cursor: pointer;
}

[v-cloak] {
  display: none;
}
</style>
